<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--事件调用的方法没有参数，小括号可以省略-->
  <!--btnClick1...-->
  <button @click="btnClick1()">按钮1</button>
  <!--btnClick1...-->
  <button @click="btnClick1">按钮1</button>

  <!--事件定义时，写方法省略了小括号，但是方法本身需要一个参数，这时，vue默认将浏览器生成的event事件对象作为参数传入到方法中-->
  <!--btnClick2...123-->
  <button @click="btnClick2(123)">按钮2</button>
  <!--btnClick2...undefined-->
  <button @click="btnClick2()">按钮2</button>
  <!--btnClick2...[object MouseEvent]-->
  <button @click="btnClick2">按钮2</button>

  <!--方法定义时，既需要event对象，又需要其他参数-->
  <!--在调用方法时，可以使用$event的方式，手动获取到浏览器的event对象-->
  <button @click="btnClick3($event, 123)">按钮3</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    methods: {
      btnClick1() {
        console.log("btnClick1...");
      },
      btnClick2(event) {
        console.log("btnClick2...", event);
      },
      btnClick3(event, t) {
        console.log("btnClick3...", event, t);
      }
    }
  });


  // 如果函数需要参数，但是没有传入，那么函数的形参为undefined

  /*
  function test(name) {
    console.log(name);
  }

  test();
  */
</script>
</body>
</html>